<template>
	<view class="page-my-card">
		<MxVipCard v-if="hasCard" v-for="item in cardList" :key="item.order_id" :info="item" class="cmp-vip-card" />
		<EmptyData v-if="!hasCard" />
	</view>
</template>

<script>
	import MxVipCard from '@/components/mine/MxVipCard.vue';
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as membercardApi from '@/api/membercard.js'
	export default {
		components: {
			MxVipCard,
			EmptyData
		},
		data() {
			return {
				cardList: []
			};
		},
		onShow() {
			this.getUserCards();
		},
		computed: {
			hasCard() {
				return this.cardList.length !== 0
			}
		},
		methods: {
			getUserCards() {
				membercardApi.purchased().then(res => {
					console.log(res)
					this.cardList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-my-card{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 24rpx;
	padding-top: 70rpx;
	.cmp-vip-card{
		margin-bottom: 36rpx;
	}
}
</style>
